<template>
    <div>
         <!-- 供应商报价 -->
         <div class="product">
                <h2>供应商报价详情</h2>
                <div class="btn">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsupplier" :disabled="flag">新增供应商报价</el-button>
                </div>
                <el-form :model="tableForm" ref="tableForm" >
                <el-table :data="tableForm.tableData3" border style="width: 90%; margin: 5px auto 30px;"  >
                    <el-table-column prop="partnerId" label="供应商名称" :render-header="req">
                        <template slot-scope="scope">
                                    <el-form-item  :prop=" 'tableData3.' + scope.$index + '.partnerId' " :rules="rules.partnerId">
                                        <el-select clear v-model="scope.row.partnerId" filterable placeholder="请选择供应商"
                                            :filter-method="supplierfilterMethod" class="thRed">
                                            <el-option v-for="item in supplierdata" :key="item.id" :label="item.name"
                                                :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </template>
    
                    </el-table-column>
                    <el-table-column prop="price" label="供应商报价" :render-header="req">
                        <template slot-scope="scope">
                                    <el-form-item :prop=" 'tableData3.' + scope.$index + '.price' " :rules="rules.price">
                                        <el-input class="thRed" v-model="scope.row.price" />
                                    </el-form-item>
                                </template>
                    </el-table-column>
                    <el-table-column prop="minQty" label="最低采购数量" :render-header="req">
                        <template slot-scope="scope">
                                    <el-form-item :prop=" 'tableData3.' + scope.$index + '.minQty' " :rules="rules.minQty">
                                        <el-input class="thRed" v-model.number="scope.row.minQty" />
                                    </el-form-item>
                                </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-success" @click="submitForm(scope.row)"
                                >确认</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="supplierDelete(scope.row)"
                               >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </el-form>
            </div>
            <!-- 供应商报价新增对话框 -->
            <el-dialog :title="title" :visible.sync="supplieradd" width="800px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                    <el-form-item label="供应商" prop="partnerId">
                        <el-select v-model="form.partnerId" filterable placeholder="请选择供应商" :filter-method="supplierfilterMethod">
                            <el-option v-for="item in supplierdata" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最低采购数量" prop="purchaseMinQty">
                        <el-input v-model.number="form.purchaseMinQty" placeholder="请输入最低采购数量" />
                    </el-form-item>
                    <el-form-item label="供应商报价" prop="price">
                        <el-input v-model="form.price" placeholder="请输入供应商报价"></el-input>
                    </el-form-item>
    
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </el-dialog>
    </div>
    </template>
    <script>
    import {
        getSupplierinfo, getStock, getPurchaseHty, getSaleHty, getStkBomPart, getOperationdetailsAPI, getReorderRules, getStkBomBlt, getsupplieradd
        , getsupplierdel, getreorderadd, getreorderupdate, addBomPart, listStock, delBomPart, getreorderDel
    } from "@/api/system/stock";
    import { listPartner, getPartner, delPartner, addPartner, updatePartner, getdetail } from "@/api/system/partner";
    export default {
      data() {
            return {
                  // 新增订单行按钮禁用
                  flag:false,
             // 供应商报价
             tableForm:{
                    tableData3: []
                },
                // 供应商报价新增弹框
                supplieradd: false,
                // 供应商参数
                form: {},
                // 供应商新增表单校验
                rules: {
                    price: [{ required: true, message: '供应商报价不能为空' },
                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g, message: '供应商报价只能输入正整数', trigger: 'blur' }
    
                    ],
                    minQty: [
                        { required: true, message: "最低采购数量不能为空", trigger: "blur" },
                        { type: 'number', message: "最低采购数量只能输入数字", trigger: "blur" }
                    ],
                    partnerId: [
                        { required: true, message: "供应商不能为空", trigger: "blur" }
                    ],
    
                },
                /// 查询供应商参数,用于下拉框
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: null,
                    date: null,
                    vat: null,
                    website: null,
                    comment: null,
                    creditLimit: null,
                    active: null,
                    customer: null,
                    supplier: 't',
                    employee: null,
                    type: null,
                    street: null,
                    zip: null,
                    city: null,
                    stateId: null,
                    countryId: null,
                    email: null,
                    phone: null,
                    mobile: null,
                    isCompany: null,
                    partnerShare: null,
                    commercialPartnerId: null,
                    commercialCompanyName: null,
                    writeUid: null,
                    writeDate: null,
                    customerCode: null,
                    deliveryAddress: null
                },
                // 供应商下拉框
                supplierdata: [],
                title:''
        };
      },
        mounted() {
         // 通过$route.query将传过来的值接收;
            let id = this.$route.query.listId;
            this.supplierList()
         this.getSupplierinfo(id)
      },
        methods: {
            req(h, colunm) {
                // console.log(h);
                // console.log(colunm);
                // console.log(colunm.column.label);
                return [
                    h('span', { style: 'color:#f56c6c' }, '*'),
                    h('span', ' ' + colunm.column.label)
                ]
    
            },
             // 取消按钮
          cancel() {
            this.dialogVisible = false;
            this.open = false;
            this.reset();
          },
             //供应商报价
             getSupplierinfo(id) {
                getSupplierinfo(id).then(res => {
                    // console.log(res);
                    this.tableForm.tableData3 = res.data
                })
            },
            // 下拉框选择供应商
            supplierList() {
                listPartner(this.queryParams).then(res => {
                    // console.log(res);
                    this.supplierdata = res.rows
                    // console.log(this.supplierdata);
    
                })
            },
            // 供应商搜索
            supplierfilterMethod(node, val) {
    
                // console.log('val', val, 'node', node)
                // console.log(node);
                const que = {
                    name: node,
                    pageSize: 100,
                    supplier: 't'
                }
                // console.log(que);
                listPartner(que).then(res => {
                    // console.log(res);
                    this.supplierdata = res.rows
                })
            },
         // 供应商报价新增弹框
            addsupplier() {
                this.flag=true
                // console.log(id);
                // this.title = '新增该产品供应商报价'
                // this.supplieradd = true
                // this.form.id = Number(this.$route.query.listId)
                let obj = {};
                obj.partnerId = "";
                obj.minQty = "";
                obj.price = "";
                
                // console.log(this.tableForm.tableData3);
                if (this.tableForm.tableData3 === null) {
                    this.tableForm.tableData3 = []
                }
                this.tableForm.tableData3.push(obj);
            },
            // 供应商新增确认
            submitForm(row) {
                row.price = Number(row.price)
                // console.log(this.form);
                row.id=this.$route.query.listId
                this.$refs["tableForm"].validate(valid => {
                    if (valid) {
                        // console.log(row);
                        this.flag=false
                        //   if (this.form.id != null) {
                        //     updateStock(this.form).then(response => {
                        //       this.$modal.msgSuccess("修改成功");
                        //       this.open = false;
                        //       this.getList();
                        //     });
                        //   } else {
                        getsupplieradd(row).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            // this.supplieradd = false;
                            //   this.getList();
                            this.getSupplierinfo( row.id)
                        });
                        //   }
                    }
                });
            },
            // 供应商报价删除
            supplierDelete(row) {
                const id = row.id
                // console.log(row);
                const that=this
                this.$modal.confirm('是否确认删除供应商为"' + row.displayName + '"' + ',报价为' + row.price + '的数据项？').then(function () {
                    return that.delsupplier(id)
                        
                }).then(() => {
                    // this.getList();
                    let id1 = this.$route.query.listId;
                    this.getSupplierinfo(id1)
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => { });
    
            },
             // 删除订单行接口方法
            delsupplier(id) {
                // console.log(this.flag);
                if (this.flag === true) {
                    this.tableForm.tableData3.pop()
                    this.flag = false
    
                } else {
                    // console.log(id);
                    getsupplierdel(id).then(res => {
                    })
                }
            },
    
      },
      components: {},
      props: {},
      watch: {},
      computed: {},
      created() {},
    };
    </script>
    <style lang="scss" scoped>
    h2 {
        text-align: center;
        line-height: 60px;
    }
    .btn {
        margin-left: 5%;
    }
    .thRed {
        // height: 200px;
        margin-top: 22px;
    }
    </style>